import { Component, Input, NgModule, OnInit, ViewChild } from '@angular/core';
import { HttpService } from '../../http/http.service'
import { NotifyService } from "../../utils/notify.service";
import 'echarts/map/js/china.js';
import 'echarts/echarts.all.js';
import * as echarts from 'echarts';
import { MetaChartMapChinaComponent } from "../meta/meta-chart-map-china/meta-chart-map-china.component";
import { LocalStorage } from "../../utils/localstorage";
import { CommonModule } from '@angular/common';
import { MetaModalService } from "../meta/meta-modal/meta-modal.service";
import { DefalutDialogComponent } from "./defalut-dialog/defalut-dialog.component";

@NgModule({
  imports: [
    CommonModule
  ]
})

@Component({
  selector: 'default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.styl'],
  providers: [HttpService]
})

export class DefaultComponent implements OnInit {
  constructor(private http: HttpService,
              private modal: MetaModalService,
              private notify: NotifyService) {
  }

  @ViewChild('chartMap', { static: true }) chartMap: MetaChartMapChinaComponent;
  data = [];
  industrycount: any;
  projectcount: any;
  companycount: any;
  provincecount: any;
  citycount: any;

  @Input() title: string = '全国测评企业布局';
  map: any;
  imgSrc = "assets/report/fullscreen.png";
  imgcity = "assets/default/city.png";
  imgprovince = "assets/default/province.png";
  imginduestry = "assets/default/induestry.png";
  btnflag: boolean = false;

  ngOnInit() {
    if (LocalStorage.isButton("default_search")) {
      this.btnflag = true;
    }
    this.initMap();
    this.getIndustryCount();
    this.getProjectCount();
    this.getCompanyCount();
    this.getProvinceCount();
    this.getCityCount();
    this.getProjectByCity();
  }


  resize() {
    //监听地图大小变化，重新绘图
    this.riseze(this.map, (val, oldVal) => {
      // console.log(`size changed！new: ${JSON.stringify(val)}, old: ${JSON.stringify(oldVal)}`);
    });
  }

  initMap() {
    this.map = document.getElementById("main");
    this.chartMap.onChartInit(this.map);
    this.resize();
  }

  riseze(el, cb) {
    // 记录元素当前宽高
    let oldWidth = el.offsetWidth;
    let oldHeight = el.offsetHeight;

    // iframe 大小变化时的回调函数
    let _this = this;

    function sizeChange() {
      // 记录元素变化后的宽高
      let width = el.offsetWidth;
      let height = el.offsetHeight;
      // 不一致时触发回调函数 cb，并更新元素当前宽高
      if (width !== oldWidth || height !== oldHeight) {
        cb({ width: width, height: height }, { width: oldWidth, height: oldHeight });
        oldWidth = width;
        oldHeight = height;

        _this.chartMap.echart = echarts.dispose(_this.chartMap.map);
        _this.chartMap.echart = echarts.init(_this.chartMap.map);
        _this.chartMap.setOption();
      }
    }

    // 将 sizeChange 函数挂载到 iframe 的resize回调中
    let iframe: any = document.getElementById('chartFrame');
    iframe.contentWindow.onresize = function () {
      sizeChange();
    };
  }


  getProjectByCity() {
    this.http.get("evl/evlproject/projectformap", '').subscribe(res => {
      if (res.err == '0') {
        for (var i = 0; i < res.data.length; i++) {
          let point = { name: '', value: 0 };
          point.name = res.data[i].cityname;
          point.value = Number(res.data[i].projectsum);
          this.data[i] = point;
        }
        // // 获取数据后重新画图
        this.chartMap.setData(this.data);
        this.chartMap.setOption();
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  getIndustryCount() {
    let para = {
      params: ""
    }

    this.http.get("evl/industry/industrycountformap", para).subscribe(res => {
      if (res.err == '0') {
        this.industrycount = res.data;
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  getProjectCount() {
    this.http.get("evl/evlproject/projectcountformap", '').subscribe(res => {
      if (res.err == '0') {
        this.projectcount = res.data;
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  getCompanyCount() {
    this.http.get("evl/company/companycountformap", '').subscribe(res => {
      if (res.err == '0') {
        this.companycount = res.data;
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  getProvinceCount() {
    let para = {
      params: ""
    }
    this.http.get("evl/company/provincecountformap", para).subscribe(res => {
      if (res.err == '0') {
        this.provincecount = res.data;
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  getCityCount() {
    let para = {
      params: ""
    }
    this.http.get("evl/company/citycountformap", para).subscribe(res => {
      if (res.err == '0') {
        this.citycount = res.data;
      } else {
        this.notify.error(res.errMsg).subscribe();
      }
    });
  }

  detailDialog(params) {
    let title = '详情';

    this.modal.create({
      nzWidth: 1000,
      nzStyle: { top: '50px' },
      nzTitle: title,
      nzContent: DefalutDialogComponent,
      nzComponentParams: {
        params: null,
        parentPage: this,
      },
      nzMaskClosable: false
    });
  }

}
